<template>
    <!-- #ifdef MP-WEIXIN -->
    <!-- <page-meta :page-style="pageStyle" /> -->
    <!-- #endif -->
    <view>
        <topHeader PageName="助融报告"></topHeader>
        <view class="container">
            <view class="top-main">
                <indexImage></indexImage>
                <search-input @searchLogin="searchLogin"></search-input>
            </view>
        </view>
        <view class="content-main" style="background-color: white;" :style="{ marginTop: height + 'px' }">
            <view class="menu-main">
                <view v-for="(item, index) in indexMenuList" :key="index" class="menu-item" @click="goto(item)">
                    <image :src="item.icon" mode=""></image>
                    <view class="menu-name">{{ item.name }}</view>
                </view>
            </view>
            <view v-if="isShowContent">
                <contentList v-if="articleList.length" :list="articleList"></contentList>
                <view v-else style="margin-top: 130rpx;">
                    <empty></empty>
                </view>
            </view>
            <view v-else class="row">
                <view v-for="item in bannerList" :key="item.id">
                    <image style="width: 335rpx; height: 455rpx;border-radius: 20rpx;" :src="item.pic"
                        mode="scaleToFill" />
                </view>
            </view>

        </view>
        <authorize :isShowAuth="isShowAuth" @authColse="authColse" @onLoadFun="onLoadFun"></authorize>
        <Activity :type="activityType" v-model="showActivity" :money="activityMoney" />
    </view>
</template>

<script>
import topHeader from '@/components/topHeader.vue'
import searchInput from './components/searchInput.vue';
import indexImage from './components/indexImage.vue';
import contentList from './components/contentList.vue';
import { indexMenuList } from './options'
import { getArticlekApi } from '@/api/airticle'
import { mapGetters } from 'vuex'
import ActivityMixin from '@/mixins/activity.js'
import Authorize from "@/components/Authorize.vue";
import Activity from '@/pages/components/activity.vue'
import LockScrollMixin from '@/mixins/lockScroll.js'

import { getConfigObj, getBannerConfig } from '@/api/system'
export default {
    components: {
        topHeader,
        searchInput,
        indexImage,
        contentList,
        Authorize,
        Activity
    },
    computed: mapGetters(['isLogin']),
    mixins: [ActivityMixin, LockScrollMixin],
    data() {
        return {
            bannerTop: 0,
            height: 0,
            indexMenuList,
            shareInfo: {},
            isShowAuth: false,
            where: {
                pageNum: 1,
                pageSize: 10,
                platformType: 5,
                // cateId: 3
            },
            articleList: [],
            total: 0,
            isLoading: false,
            isShowAuth: false,
            isGoingMsg: false,
            isShowContent: true,
            bannerList: []
        }
    },
    // #ifdef MP-WEIXIN
    onShareAppMessage: function (res) {
        if (res.from === 'button') { }
        return {
            imageUrl: '../../static/image/indexSharebg.png',
            title: '助融报告',
            path: `/pages/index/index`,
        }
    },
    // #endif
    onLoad() {
        this.$nextTick(() => {
            // #ifdef MP-WEIXIN
            this.getSystemHeight();
            // #endif
            
            this.getContainerHeight()
            this.getConfigObj()
            this.getArticleList()
            this.getBannerList()
        });
    },
    async onPullDownRefresh() {

        uni.pageScrollTo({
            scrollTop: 0,
            duration: 0,
        });
        this.resetPageInfo()
        uni.stopPullDownRefresh();
    },
    onReachBottom() {
        if (this.where.pageNum * this.where.pageSize < this.total) {
            this.where.pageNum++
            this.getArticleList()
        } else {
            this.$util.Tips('没有更多数据了')
        }
    },
    methods: {
        authColse() {
            this.isShowAuth = false;
        },
        onLoadFun() {
            this.isShowAuth = false
            this.doActivity()
            // if (this.isGoingMsg) {
            //     this.isGoingMsg = false
            //     uni.navigateTo({
            //         url: "/pagesUser/msg/index"
            //     })
            // }
        },
        getBannerList() {
            getBannerConfig(7).then(res => {
                this.bannerList = res.data
            })
        },
        getConfigObj() {
            let key = 'mp_home_show_article'
            getConfigObj(key).then(res => {
                this.isShowContent = res.data.mp_home_show_article == 1 ? true : false
            })
        },
        resetPageInfo() {
            this.articleList = []
            this.where.pageNum = 1
            this.total = 0

            this.getSystemHeight();
            this.getContainerHeight()
            this.getArticleList()

        },
        goto(v) {
            if (v.auth && !this.isLogin) {
                this.isGoingMsg = true
                return this.isShowAuth = true
            }
            let params = {
                Um_Key_ButtonName: '金刚区' + '-' + v.name,
                Um_Key_SourcePage: '首页',
            }
            this.$umaTrack.pageClickTrack(params)
            if (v.type == 'switch-link') {
                uni.switchTab({
                    url: v.path
                })
            } else if (v.type == 'link') {
                uni.navigateTo({
                    url: v.path
                })
            }

        },
        getArticleList() {
            this.isLoading = true
            getArticlekApi(this.where).then(res => {

                this.articleList = [...this.articleList, ...res.data.list]
                this.total = res.data.total
            }).finally(() => {
                this.isLoading = false
            })
        },
        searchLogin(e) {
            this.isShowAuth = e
        },
        getContainerHeight() {
            let that = this;
            let info = uni.createSelectorQuery().select('.container');

            info.boundingClientRect(function (data) {
                console.log(data);
                // #ifdef MP-WEIXIN
                that.height = data.height
                // #endif
                // #ifdef H5
                that.height = data.height
                // #endif
            }).exec();
        },
        getSystemHeight() {
            let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
            let searchBarHeight = menuButtonInfo.height;
            this.bannerTop = menuButtonInfo.top + searchBarHeight + 20;
        }
    }
}
</script>

<style lang="scss">
page {
    background-color: #fff !important;
}

.container {
    background-color: #fff !important;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    margin-bottom: 30rpx;
}

.top-main {
    width: 100%;
    background: #488AFD;

    /* #ifdef MP-WEIXIN */
    padding: 180rpx 30rpx 30rpx;
    /* #endif */
    /* #ifdef H5 */
    padding: 120rpx 30rpx 30rpx;

    /* #endif */
    .top-main-image {
        width: 100%;
        position: fixed;
        // background-color: pink;
        height: 200rpx;
        z-index: 11;
    }
}

.menu-main {
    display: flex;
    align-items: center;
    margin-top: 30rpx;
    padding: 30rpx 0 30rpx;

    .menu-item {
        text-align: center;
        flex: 1;

        >image {
            width: 108rpx;
            height: 108rpx;
        }

        >view {
            font-weight: 400;
            font-size: 26rpx;
            margin-top: -18rpx;
            color: #666666;
            line-height: 37rpx;
        }
    }
}


.content-main {
    padding: 0 30rpx 30rpx;
}
</style>